---
id: jsexpression
title: 别在分不清 js 中的表达式和语句了
displayed_sidebar: baseSidebar
---

## 前言

我对 javascript 这门语言的理解是，javascript 是计算机世界跟程序猿世界沟通的介质，javascript 是写给程序员——人去看的，计算机是看不懂的，需要经过编译才能让计算机或者说浏览器看懂。就好像，一个中国人跟外国人交流，都使用本国语言大家是互相听不懂的。那要想让双方听懂，怎么办呢，要么借助翻译工具，要么双方自己在大脑里翻译对方的语言。javascript 要想让浏览器看懂并执行我们的命令，同样需要翻译工具——js 引擎
javascript 又是由一句句表达式或者语句组件中的，表达式我们可以理解为指令，我们需要浏览器干什么，这就是我对 javascript 这门语言的理解

## 表达式

> 表达式的最终结果是一段产生值的代码

例如，下面这些都是表达式【但不仅限于下面】

- 1—> output:1
- ‘hello’—> output:’hello’
- 5\*10—> output:50
- number > 100—> output: true or false
- [1,2,3].pop()—> output:3

> 表达式也可以包含表达式

### 演示

> 可拖动 slider 查看其中的表达式

import JSExpression from "@site/src/docsDemo/JSExpression";

<BrowserWindow>
  <JSExpression color="#25c2a0"></JSExpression>
</BrowserWindow>

## 声明

javascript 程序是由一系列的语句组成的，每个语句是一个指令，指挥着计算机/浏览器去命令

例如，下面这些都是语句

```js showLineNumbers title=语句
let hi = 5;
if (hi > 10) {
  // More statements here
}
throw new Error("Something exploded!");
```

:::info
那现在来总结一下：<br/>
语句通常是将我们程序组合在一起的刚性结构，而表达式则是填充在里面的具体实现。或者这样说，大家可能更能理解一下，语句是一个个卡槽，我们可以将任何喜欢的东西放到插入到卡槽里，语句通常为表达式提供“槽”。我们可以把任何表达式放进这些槽里。
:::

例如：声明一个变量有一个表达式槽

```js
let hi = /* 一些表达式 */ ;
```

我们可以使用前面的所有表达式填入这个表达式槽里面

```js
let hi = 1;
let hi = "hello";
let hi = 5 * 10;
let hi = num > 100;
let hi = isHappy ? "🙂" : "🙁";
let hi = [1, 2, 3].pop();
```

当当就语言合法性而言，表达式是可以互换的，如果一个语句有一个表达式槽，我们可以把任何表达式填入其中，代码就会正常运行。

但是尽管，表达式看上去没问题，也正确运行，我们还是有可能会遇到一些问题

例如下面的代码，语法上是有效的，但是当我们尝试运行它会导致浏览器选项卡崩溃，因为它是一个无限循环
:::danger

```js
while ("hello") {
  // 因为 “hello” 这个条件永远为 true,  它将
  // 一直永远下去，直到浏览器崩溃为止.
  // 这句代码语法上是正确的, 但运行后仍然有问题
}
```

:::

## 区别语句和表达式最简单的方法

```js
console.log(/* 填入任何 javascript */);
```

在浏览器控制台运行它，如果输出一个具体的值，则表示是表达式，如果你得到一个错误，它是一个*语句*（或者，可能是无效的 JS）。

为什么 `console.log` 可以用来判断，因为所有函数的入参都必须是一个表达式，表达式产生一个值，该值传递给函数，语句不产生值，因此它们不能用作函数参数